<!DOCTYPE html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>Using pseudo styling</title>
  <script src="../../../platform.js"></script>
  <script src="register.js"></script>
  <script src="../../../tools/test/htmltest.js"></script>
  <script src="../../../node_modules/chai/chai.js"></script>
</head>
<body>
  <x-test></x-test>

  <template id="x-inner">
    <div id="special" pseudo="x-special">Special</div>
  </template>

  <template id="x-test">
    <style>
      x-inner::x-special {
        background: yellow;
      }

      .two::x-special {
        background: green;
      }
    </style>
    <x-inner id="inner1"></x-inner>
    <x-inner id="inner2" class="two"></x-inner>
  </template>

  <script>
    register('x-inner', '', HTMLElement.prototype, ['x-inner']);
    register('x-test', '', HTMLElement.prototype, ['x-test']);
    
    document.addEventListener('WebComponentsReady', function() {
      var test = document.querySelector('x-test');
      var special1 = test.shadowRoot.querySelector('#inner1').shadowRoot
          .querySelector('#special');
      var special2 = test.shadowRoot.querySelector('#inner2').shadowRoot
          .querySelector('#special');

      chai.assert.equal(getComputedStyle(special1).backgroundColor, 'rgb(255, 255, 0)',
        'pseudos styling is applied');

      chai.assert.equal(getComputedStyle(special2).backgroundColor, 'rgb(0, 128, 0)',
        'pseudos styling is applied');
      done();
    });
  </script>
</body>
</html>
